<template>
    <div>
        <ul id="item">
            <li v-for="item in information.list" :key="item.id" @click="lookDetail(item.id)" :data-id="item.id" v-if="show">
                <div class="img" :style="{'backgroundImage':'url('+item.img1+')'}"></div>
                <div class="text">
                    <h1>{{item.title}}</h1>
                    <h2>{{item.text.substring(0,80)}}</h2>
                    <p>
                        <i class="layui-icon">&#xe60e;</i>
                        发布于 {{item.date}}    |   {{item.account_info.name}}（{{item.account_info.role_info.rolename}}）|   阅读（{{item.reading}}）</p>
                </div>
                <div class="handle" v-if="information.hideEdit">
                    <a href="javaScript:void(0)" @click.stop="edit(item.id)">编辑</a> |
                    <a href="javaScript:void(0)" @click.stop="del(item.id)">删除</a>
                </div>
            </li>
        </ul>
        <div id="list"></div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "announcement",
        props:['urls','isread','information'],
        data(){
            return {
                show:true,
            }
        },
        created:function(){

        },
        computed:{

        },
        methods:{
            edit(msg){
                var _this = this;
                $.ajax({
                    url:_this.urls.announcementManagement.list,
                    type:'post',
                    data:{id:msg},
                    success:function(res){
                        // console.log(res)
                        _this.$emit('getId',res.data);
                    },
                    error(msg){
                        console.log(msg)
                    }
                })
            },
            lookDetail(msg){
               this.$emit('detail',msg)
            },
            del(msg){
                var _this = this;
                layui.use(['layer'],function(){
                    var layer = layui.layer;
                    layer.open({
                        content:'删除后不可恢复，请您再次确认删除',
                        yes:function(){
                            layer.closeAll();
                            $.post(_this.urls.announcementManagement.delText,{id:msg},function(res){
                                layer.msg('删除成功');
                                _this.$emit('del')
                            })
                        }
                    })
                })

            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../static/css/style.less";
    #item{
        li{
            width: 100%;
            padding:31px 0;
            border-bottom: 1px solid #bbb;
            cursor: pointer;
            .df;
            .pr;
            .img{
                width: 180px;
                height: 125px;
                background-color: #ccc;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                margin-right: 30px;
            }
            .text{
                width:600px;
                padding: 3px 0;
                h1{
                    font-size: 18px;
                    color: @c3;
                    line-height: 27px;
                }
                h2{
                    font-size: 14px;
                    color: @c9;
                    padding:13px 0 11px 0;
                }
                p{
                    font-size: 13px;
                    color: @c9;
                }
            }
            .handle{
                .pa;
                top: 83px;
                right: 70px;
            }
        }
        li:last-child{
            border:none;
        }
    }
</style>